import React from "react";
import { SearchBar, WhiteSpace,Card } from 'antd-mobile';

// const Item = List.Item;

class SearchBarExample extends React.Component {

  render() {
    return (<div>
         <style jsx="true">{`
            body,html{
                font-size:62.5%;
            }
            i{
                font-style: normal;
                color: #000;
                margin-left:5px;
            }
            .am-card-header-extra {
                font-size: 1.2rem;
                color: red;
            }
            .offline{
                font-size: 1.2rem;
                color: #888;
                margin: 0;
            }
            .data-content{
                float:left;
                width:85%;
            }
            .right-tool{
                float: left;
                width: 10%;
                background: white;
                padding: 0.5rem;
                box-sizing: border-box;
                border: 1px solid #888;
                border-radius: 50%;
                text-align: center;
                margin-top: 4.5rem;
            }
            .right-tool>img{
                width:95%;
            }
            .data-content span{
                display:inline-block;
                width:50%;
                text-align: left;
                font-size:1.2rem;
                color:#888;
            }
            .data-content p{
                margin:0.5rem 0;
            }
            .red{
                display:inline-block;
                width:0.7rem;
                height:0.7rem;
                border-radius:50%;
                background:red;
                margin-right:3px;
                border:2px solid pink;
                vertical-align: bottom;
            }
            .am-card-footer-content {
                font-size: 1.2rem;
                color:#000
            }
         `}</style>
         <SearchBar placeholder="请输入设备名称进行搜索" maxLength={8} />
        <WhiteSpace />
        <div className="car-center">
            <Card className="car-right">
                <Card.Header
                    title={<div><p>西走道#配电柜</p><p className="offline">离线</p></div>}
                    // thumb="https://gw.alipayobjects.com/zos/rmsportal/MRhHctKOineMbKAZslML.jpg"
                    extra={<div><i className="red"></i><span>故障</span></div>}
                />
                <Card.Body >
                    <div className="data-content">
                        <p><span>当前电流<i>220v</i></span><span>线缆1漏电值<i>1.5mA</i></span></p>
                        <p><span>线缆2漏电值<i>3.5mA</i></span><span>线缆3漏电值<i>1.3mA</i></span></p>
                        <p><span>线缆4漏电值<i>0.5mA</i></span><span>线缆1温度值<i>15℃</i></span></p>
                        <p><span>线缆2温度值<i>38℃</i></span><span>线缆3温度值<i>25℃</i></span></p>
                        <p><span>线缆2温度值<i>58℃</i></span></p>
                    </div>
                    <div className="right-tool">
                    <img  src={`https://gw.alipayobjects.com/zos/rmsportal/MRhHctKOineMbKAZslML.jpg`}
                  alt=""/>
                    </div>
                </Card.Body>
                <Card.Footer content={<div><span>位置：</span><span>深圳市南山区消检通大厦1105西走道</span></div>} />
            </Card>
        </div>
        
    </div>);
  }
  
}
export default SearchBarExample
